<template>
	<view>
		
			<top-bar fixed="relative"></top-bar>
			
		<view class="sec-banner">
			<image src="/static/images/seckill_banner.png"></image>
		</view>
		<scroll-view scroll-x class="nav nav-scroll sec-hours" scroll-with-animation >
			<view class="cu-item hours-item" 
				v-for="(item,index) in secHours" :key="index" @click="_changeActive(item)" :data-id="index">
				<view class="hours-t" :class="{'active':active == item.hours}">{{item.name}}</view>
				<view class="hours-s" :class="{'active':active == item.hours}">整点秒杀</view>
			</view>
		</scroll-view>
		
		<template v-for="(item,index) in secHours">
			<view class="current-active" :key="index" v-if="active == item.hours">
				<view class="name">{{item.name}}</view>
				<view class="info"><text class="value">当前整点秒杀</text></view>
			</view>
		</template>
		
		<view class="seckill-goods">
			<view class="li" v-for="(item,index) in goods" :key="index">
				<view class="image">
					<image v-if="item.coverPhoto" :src="item.coverPhoto"></image>
					<image v-else src="/static/noPic.png"></image>
				</view>
				<view class="main">
					<view><text class="title">{{item.prodName}}</text></view>
					<view class="info" >
						<view>
							<view><text class="group-price">
								<text class="unit">秒杀价￥</text>
								<text class="value">{{item.killPrice}}</text>
							</text>
							<text class="normal-price">原价￥{{item.price}}</text></view>
							<view class="stock">
								<text class="label">立即下单</text>
								<text class="value">仅剩{{item.killStock}}件</text>
							</view>
						</view>
						<view class="seckill-btn">
							<text class="btn" @click="_toSeckillGoods(item)">限时秒杀</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {queryProductSeckill} from '@/api/goods/goodsApi.js'
	import topBar from "@/components/top-bar/top-bar.vue";
	export default {
		components: {
			topBar
		},
		data() {
			return {
				active: 12,
				secHours: [{
					name: '08:00',
					hours: 8,
				},{
					name: '10:00',
					hours: 10,
				}, {
					name: '12:00',
					hours: 12,
				}, {
					name: '14:00',
					hours: 14,
				}, {
					name: '15:00',
					hours: 15,
				}, {
					name: '16:00',
					hours: 16,
				}, {
					name: '20:00',
					hours: 20,
				}, {
					name: '22:00',
					hours: 22,
				}],
				goods: [],
				shopId: ''
			}
		},
		async onLoad(options) {
			await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			this.shopId = options.shopId;
			this.computeCurHours();
			this._loadSecKillGoods();
		},
		methods: {
			_changeActive:function(item){
				this.active = item.hours;
				this._loadSecKillGoods();
			},
			computeCurHours:function(){
				let _that = this;
				let _date = new Date();
				let _curHours = _date.getHours();
				_that.active = this.secHours[0].hours;
				this.secHours.forEach(_hours=>{
					if(_hours.hours >= _curHours){
						_that.active = _hours.hours;
						return ;
					}
				})
				
			},
			_loadSecKillGoods:function(){
				let _that = this;
				queryProductSeckill({
					page:1,
					row:30,
					killHours:this.active,
					shopId:this.shopId,
					validData:'Y'
				}).then(_data=>{
					_that.goods = _data;
				})
			},
			_toSeckillGoods:function(_goods){
				uni.navigateTo({
					url:'/pages/goods/seckillGoods?productId='+_goods.productId+"&shopId="+_goods.shopId+"&killId="+_goods.killId
				});
			}
		}
	}
</script>

<style lang="scss">
	.sec-banner {
		height: 500rpx;
		image {
			width: 100%;
			height: 500rpx;
		}
	}

	.sec-hours {
		color: #FEE4CB;
		padding: 20rpx 0;
		background: #332524;
		.hours-item {
			width: 20%;
			line-height: 36rpx;
			height: 36rpx;
			.hours-t {
				font-size: 32rpx;
				text-align: center;
			}
			.hours-s {
				font-size: 24rpx;
				text-align: center;
			}
			.active {
				color: #FF4049;
			}
		}
	}

	.seckill-goods {
		.li {
			display: flex;
			padding: 25rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			background: #FFF;
			.image, .image image {
				width: 155rpx;
				height: 155rpx;
				margin-right: 25rpx;
				border-radius: 15rpx;
			}
			.main {
				flex: 1;
			}
			.info {
				flex: 1;
				margin-top: 20rpx;
				.group-price {
					color: #FF4049;
					.unit {
						font-size: 24rpx;
					}
					.value {
						font-size: 36rpx;
					}
				}
				.normal-price {
					color: #909399;
					font-size: 24rpx;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
				.stock {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					margin-top: 15rpx;
					.label {
						display: block;
						color: #FFF;
						padding: 0 10rpx;
						border: 1rpx solid #BF8200;
						border-radius: 5rpx 0 0 5rpx;
						background: #BF8200;
					}
					.value {
						display: block;
						color: #BF8200;
						padding: 0 10rpx;
						border: 1rpx solid #BF8200;
						border-radius: 0 5rpx 5rpx 0;
					}
				}
				.seckill-btn {
					display: flex;
					justify-content: flex-end;
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 6.5em;
						height: 50rpx;
						color: #FFF;
						font-size: 24rpx;
						border-radius: 25rpx;
						background: #FF4049;
					}
				}
			}
		}
	}
	
	.current-active {
		text-align: center;
		margin: 30rpx 0;
		.name {
			color: #FF4049;
			font-size: 42rpx;
			font-weight: 700;
		}
		.info {
			color: #332524;
			margin-top: 10rpx;
			.value {
				display: inline-flex;
				align-items: center;
				height: 50rpx;
				padding: 0 15rpx;
				border-radius: 10rpx;
				background: #FEE4CB;
			}
		}
	}
</style>
